<template>
  <div class="full-box padding-box shadow-box">
    <OperateCommon :showBack="true" @back="linkTo('/tenderControlPriceReview')">
    </OperateCommon>
    <div>
      <el-form
        :model="form"
        ref="form"
        :rules="rules"
        label-width="120px"
        :inline="false"
      >
        <div class="d-model">
          <div class="d-row">
            <el-form-item label="项目名称" prop="project_id">
              <el-select
                style="width: 500px"
                v-model="form.project_id"
                value-key=""
                placeholder=""
                clearable
                filterable
                :disabled="id > 0"
                @change="projectChange"
              >
                <el-option
                  v-for="item in projectList"
                  :key="item.id"
                  :label="item.project_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="建设单位" prop="">
              <el-input v-model="info.owner_name" disabled></el-input>
            </el-form-item>
            <el-form-item label="总投资" prop="">
              <el-input
                style="width: 200px"
                v-model="info.investment"
                disabled
              ></el-input>
              <span>（ 万元 ）</span>
            </el-form-item>
            <el-form-item label="建设地址" prop="">
              <el-input
                style="width: 500px"
                v-model="info.project_address"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="d-row">
            <el-form-item class="d-textarea" label="建设规模及内容" prop="">
              <el-input
                type="textarea"
                v-model="info.project_content"
                disabled
                :autosize="{
                  minRows: 3,
                  maxRows: 6,
                }"
              ></el-input>
            </el-form-item>
          </div>
          <div class="d-row">
            <el-form-item label="招标工程" prop="bid_id">
              <el-select
                style="width: 500px"
                v-model="form.bid_id"
                value-key=""
                placeholder=""
                clearable
                filterable
                :disabled="id > 0"
                @change="bidChange"
              >
                <el-option
                  v-for="item in bidList"
                  :key="item.id"
                  :label="item.bid_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="合同金额" prop="">
              <el-input-number
                v-model="bidInfo.win_price"
                label=""
                disabled
                :precision="2"
                :controls="false"
              >
              </el-input-number>
              <span>（ 万元 ）</span>
            </el-form-item>
          </div>
          <div class="d-row">
            <el-form-item label="招标控制价">
              <el-input-number
                v-model="form.control_price"
                label=""
                :precision="2"
                :controls="true"
                controls-position="right"
              >
              </el-input-number>
              <span>（ 万元 ）</span>
            </el-form-item>

            <el-form-item label="受理时间" prop="">
              <el-date-picker
                v-model="form.acceptance_date"
                type="date"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="审核时间" prop="">
              <el-date-picker
                v-model="form.review_date"
                type="date"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <el-form-item label="">
            <el-button type="primary" @click="save">保存</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import OperateCommon from "@/components/Common/OperateCommon.vue";
import LinkTo from "@/mixins/LinkTo";
import {
  getBidContorlBidList,
  getBidContorlDetail,
  getBidContorlProjectList,
  postBidContorlSave,
} from "@/api/WorkCollection/Index";
import { required } from "@/utils/eValidate";
export default {
  name: "SettlementForm",
  mixins: [LinkTo],
  components: {
    OperateCommon,
  },
  data() {
    return {
      id: 0,
      form: {
        project_id: "", // 项目id
        project_name: "", // 项目名称
        bid_id: "", // 招标工程 id
        bid_name: "", // 招标工程名称
        acceptance_date: "", // 受理时间
        review_date: "", // 审核时间
        control_price: "", // 招标控制价
      },
      info: {
        owner_name: "",
        investment: "",
        project_address: "",
        project_content: "",
      },
      bidInfo: {
        win_price: undefined,
      },
      rules: {
        project_id: [required],
        bid_id: [required],
      },
      projectList: [],
      bidList: [],
    };
  },
  methods: {
    projectChange(val) {
      this.info = this.projectList.filter((i) => {
        if (i.id == val) {
          return i;
        }
      })[0];
      this.form.project_name = this.info.project_name;

      this.form.bid_id = "";
      this.bidInfo.win_price = undefined;

      this.initBid();
    },
    bidChange(val) {
      this.bidInfo = this.bidList.filter((i) => {
        if (i.id == val) {
          return i;
        }
      })[0];
      this.form.bid_name = this.bidInfo.bid_name;
    },
    initData() {
      getBidContorlDetail({ id: this.id }).then((res) => {
        this.form = Object.assign(this.form, res.data);

        this.bidList = [
          {
            id: this.form.bid_id,
            bid_name: this.form.bid_name,
          },
        ];

        this.info.owner_name = this.form.owner_name;
        this.info.investment = this.form.investment;
        this.info.project_address = this.form.project_address;
        this.info.project_content = this.form.project_content;

        this.bidInfo.win_price = this.form.win_price;
      });
    },
    async initProject() {
      await getBidContorlProjectList().then((res) => {
        if (res.code == 0) {
          this.projectList = res.data;
        }
      });
    },
    initBid() {
      getBidContorlBidList({
        id: this.form.project_id,
      }).then((res) => {
        if (res.code == 0) {
          this.bidList = res.data;
        }
      });
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          postBidContorlSave(this.form).then((res) => {
            if (res.code == 0) {
              this.$message.success("保存成功");
              this.linkTo("/tenderControlPriceReview");
            }
          });
        }
      });
    },
  },
  created() {
    this.id = this.$route.params.id;
    if (this.id > 0) {
      this.initProject().then(() => {
        this.initData();
      });
    } else {
      this.initProject();
    }
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  color: #000;
}
.d-model {
  margin-bottom: 10px;
  font-weight: 600;
}
.d-row {
  margin: 20px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
  :deep(.el-form-item) {
    margin-bottom: 20px;
  }
}
.d-row-child {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.d-textarea {
  width: 100%;
  margin: 0 auto;
}
</style>